<template>
<!-- 定制  欧普  查看3D链接 -->
  <div class="dz-op-3Dlink" v-show="linkShow">
    <section class="mdetail_goodsdet_detail recommendation_logo block_logo">
      <span class="liner_detail"></span>
      <span class="detail_content">
        <i>
          <img src="https://img.wifenxiao.com/h5-wfx/images/item/detail/dz_3D_icon.png" alt="">
          <a class="goodsdet_detail">查看3D效果</a>
        </i>
      </span>
      <span class="liner_detail"></span>
    </section>
    <section class="link_list">
      <ul class="clearfix">
        <li v-for="(item,index) in lists" :key="index">
          <a :href="item">效果{{index+1}}</a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { getItemGroup3DLinks } from '@/api/dz/dzApi'
export default Vue.extend({
  name: 'index',
  props: {
    itemId: {
      type: String
    }
  },
  data() {
    return {
      linkShow: false,
      lists: []
    }
  },
  methods: {
    init() {
      const params = { item_id: this.itemId }
      getItemGroup3DLinks(params).then(res => {
        if (res.links && res.links.length > 0) {
          this.lists = res.links
          this.linkShow = true
        }
      })
    }
  },
  created() {
    this.init()
  }
})
</script>

<style  lang="scss">
@import "src/styles/mixin";
.dz-op-3Dlink{
  margin-bottom:20px;
}
//详情等标题
.block_logo {
  font-size: 28px;
  text-align: center;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .detail_content {
    padding: 0 30px;
    img{
      display: inline-block;
      vertical-align: -8px;
      width:34px;
      height:34px;
    }
  }
  .liner_detail {
    height: 2px;
    width: 165px;
    background: #e6e6e6;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      background: #e6e6e6;
      width: 8px;
      height: 8px;
      top: 50%;
      transform: rotate(-45deg) translateY(-50%);
    }
    &:first-child {
      &::after {
        right: -3px;
      }
    }
    &:last-child {
      &::after {
        left: 3px;
      }
    }
  }
}
.link_list{
  padding:0 30px;
  li{
    float:left;
    background: none;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 20px;
    a{
      display: block;
      height: 80px;
      border-radius: 40px;
      background: -webkit-linear-gradient(-90deg, #e90104, #fe1b49);
      background: linear-gradient(-90deg, #e90104, #fe1b49);
      text-align: center;
      line-height: 80px;
      font-size: 30px;
      color: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
  }
}
</style>
